<template>
  <div>
    <!-- 顶部导航 -->
    <!-- <van-tabs v-model="getActive" class="nav" :class="{ active: sticky }"> -->
    <van-tabs v-model="active" class="nav" :class="{ active: sticky }">
      <van-tab to="/films/nowPlaying" title="正在热映"></van-tab>
      <van-tab to="/films/comingSoon" title="即将上映"></van-tab>
    </van-tabs>
    <router-view />
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data() {
    return {
      active: 0,
      sticky: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler({ path }, o) {
        this.active = path === '/films/comingSoon' ? 1 : 0
      }
    }
  },
  /* computed: {
    getActive: {
      get() {
        return this.$route.path === '/films/comingSoon' ? 1 : 0
      },
      set(v) {}
    }
  }, */
  mounted() {
    console.log()
    // 滚动条事件的处理  吸顶  -- 节流
    window.addEventListener(
      'scroll',
      _.throttle(e => {
        // console.log(document.documentElement.scrollTop)
        if (document.documentElement.scrollTop > 100) {
          this.sticky = true
        } else {
          this.sticky = false
        }
      }, 300)
    )
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .van-tab--active {
    color: #ff5f16;
  }
  .van-tabs__line {
    background-color: #ff5f16;
  }
}
.nav {
  width: 100%;
  z-index: 1;
  top: 0;
}
.active {
  position: fixed;
}
</style>
